<!--教学基础数据统计-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right87">
        <div class="item-name">查询条件：</div>
        <el-select v-model="dataForm.changeValue" placeholder="请选择" style="width: 200px" size="mini" @change="changeSearch">
          <el-option v-for="item in searchList" :key="item.typeid" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87">
        <div class="item-name">学期：<a class="star">*</a></div>
        <el-select v-model="dataForm.xueqi" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87" v-if="dataForm.changeValue == 1">
        <div class="item-name">教员姓名：</div>
        <el-input v-model="dataForm.teacherName" style="width: 110px" size="mini"></el-input>
      </div>
      <div class="search-container-item right87" v-if="dataForm.changeValue != 1">
        <div class="item-name">课程名称：</div>
        <el-input v-model="dataForm.courseName" style="width: 110px" size="mini"></el-input>
      </div>
      <div class="search-container-item right87" v-if="dataForm.changeValue == 1 || dataForm.changeValue == 2">
        <div class="item-name">系：</div>
        <el-select v-model="dataForm.dept" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in xi" :key="item.label" :label="item.deptName" :value="item.deptName"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87" v-if="dataForm.changeValue == 1 || dataForm.changeValue == 2">
        <div class="item-name">教研室：</div>
        <el-select v-model="dataForm.staffRoom" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in jys" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87" v-if="dataForm.changeValue == 3 || dataForm.changeValue == 4">
        <div class="item-name">年级：</div>
        <el-select v-model="dataForm.grade" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in gradeList"  :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87" v-if="dataForm.changeValue == 3 || dataForm.changeValue == 4">
        <div class="item-name">专业：</div>
        <el-select v-model="dataForm.major" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in jys" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="search-button color-primary width70" @click="getList">
        <img src="../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data"  v-if="dataForm.changeValue == 1" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column prop="xueqiName" label="学期" align="center" width="150"></el-table-column>
        <el-table-column prop="bx" label="系" align="center" width="150"> </el-table-column>
        <el-table-column prop="staffRoom" label="教研室" align="center"></el-table-column>
        <el-table-column prop="teacherName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="courseperCount" label="作为课程负责人承担课程门数" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'作为课程负责人承担课程门数')">{{scope.row.courseperCount}}</span>
        </el-table-column>
        <el-table-column prop="teachTaskCount"  label="非课程负责人承担门数" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'非课程负责人承担门数')">{{scope.row.teachTaskCount}}</span>
        </el-table-column>
        <el-table-column prop="courseCount" label="承担课程总门数" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'承担课程总门数')">{{scope.row.courseCount}}</span>
        </el-table-column>
      </el-table>
      <el-table :data="tableData" border style="width: 100%" class="table-data" v-if="dataForm.changeValue == 2" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column prop="xueqiName" label="学期" align="center" width="150"></el-table-column>
        <el-table-column prop="bx" label="系" align="center" width="150"> </el-table-column>
        <el-table-column prop="staffRoom" label="教研室" align="center"></el-table-column>
        <el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
        <el-table-column prop="teachTaskCount" label="主讲人数" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'主讲人数')">{{scope.row.teachTaskCount}}</span>
        </el-table-column>
        <el-table-column prop="courseper" label="课程负责人" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'课程负责人')">{{scope.row.courseper}}</span>
        </el-table-column>
        <el-table-column prop="gradeName" label="其他主讲" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'其他主讲')">{{scope.row.gradeName}}</span>
        </el-table-column>
      </el-table>
      <el-table :data="tableData" border v-if="dataForm.changeValue == 3" style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column prop="xueqiName" label="学期" align="center" width="150"></el-table-column>
        <el-table-column prop="grade" label="年级" align="center"></el-table-column>
        <el-table-column prop="major" label="专业" align="center"></el-table-column>
        <el-table-column prop="basicCount" label="通识课门数" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'通识课门数')">{{scope.row.basicCount}}</span>
        </el-table-column>
        <el-table-column prop="majorCount" label="专业课门数" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'专业课门数')">{{scope.row.majorCount}}</span>
        </el-table-column>
        <el-table-column prop="allCourse" label="课程总门数" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'课程总门数')">{{scope.row.allCourse}}</span>
        </el-table-column>
      </el-table>
      <el-table :data="tableData" border v-if="dataForm.changeValue == 4" style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column prop="xueqiName" label="学期" align="center" width="150"></el-table-column>
        <el-table-column prop="grade" label="年级" align="center"></el-table-column>
        <el-table-column prop="major" label="专业" align="center"></el-table-column>
        <el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
        <el-table-column prop="teachTaskCount" label="主讲人数" align="center">
          <span slot-scope="scope" class="hr" @click="jumpPage(scope.row,'主讲人数')">{{scope.row.teachTaskCount}}</span>
        </el-table-column>
        <el-table-column prop="courseper" label="课程负责人" align="center">
          <span slot-scope="scope" class="hr"  @click="jumpPage(scope.row,'课程负责人')">{{scope.row.courseper}}</span>
        </el-table-column>
        <el-table-column prop="gradeName" label="其他主讲" align="center">
          <span slot-scope="scope" class="hr"  @click="jumpPage(scope.row,'其他主讲')">{{scope.row.gradeName}}</span>
        </el-table-column>
      </el-table>
      <div class="sum-css" v-if="dataForm.changeValue != 3">
        <div style="width:152px" v-if="dataForm.changeValue != 4">合计</div>
        <div style="width:164px" v-else>合计</div>
        <div style="width:152px" v-if="dataForm.changeValue != 4"></div>
        <div style="width:273px" v-else></div>
        <div style="width:274px">
          <span v-if="dataForm.changeValue == 4">{{sumList.majorCount}}</span>
        </div>
        <div style="width:273px">
          <span v-if="dataForm.changeValue == 1">{{sumList.teacherCount}}</span>
          <span v-if="dataForm.changeValue == 2 || dataForm.changeValue == 4">{{sumList.courseCount}}</span>
        </div>
        <div style="width:273px">
          <span v-if="dataForm.changeValue == 1">{{sumList.atCourseperCount}}</span>
          <span v-if="dataForm.changeValue == 2 || dataForm.changeValue == 4">{{sumList.mainTaskCount}}</span>
        </div>
        <div style="width:273px">
          <span v-if="dataForm.changeValue == 1">{{sumList.unCourseperCount}}</span>
          <span v-if="dataForm.changeValue == 2 || dataForm.changeValue == 4">{{sumList.courseperCount}}</span>
        </div>
        <div style="width:273px" >
          <span v-if="dataForm.changeValue == 1">{{sumList.teachCourseCount}}</span>
          <span v-if="dataForm.changeValue == 2 || dataForm.changeValue == 4">{{sumList.otherMainTaskCount}}</span>
        </div>
      </div>
      <div class="sum-css" v-if="dataForm.changeValue == 3">
        <div style="width:152px">合计</div>
        <div style="width:306px"></div>
        <div style="width:303px">{{sumList.majorCount}}</div>
        <div style="width:303px">{{sumList.basicCount}}</div>
        <div style="width:303px">{{sumList.majorCourseCount}}</div>
        <div style="width:303px">{{sumList.courseCount}}</div>
      </div>
      <div class="export-button" @click="importExcel" style="width:150px">
        <img src="../../assets/assessment/icon-export.png" alt="" />
        <span>全部导出Excel</span>
      </div>
      <h1 class="total-notice">当前共找到{{total}}条记录，当前显示51-100条</h1>
    </div>
    <div class="pagination-block">
      <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import {basicKCList1,basicKCList2,basicKCList3,basicKCList4,basicKCListSum1,basicKCListSum2,basicKCListSum3,basicKCListSum4} from "@/api/lineData";
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
     //查询条件
      searchList:[
        {label:'按教员-课程维度筛选',value:1},
        {label:'按课程-教员维度筛选',value:2},
        {label:'按专业-课程维度筛选',value:3},
        {label:'按专业-课程-教员维度筛选',value:4},
      ],
      xq:[],//学期
      xi:[],//系
      jys:[],//教研室
      dataForm:{
        changeValue:1,//查询条件
        xueqi:'',//学期
        major:'',//专业
        grade:'',//年级
        teacherName:'',//教员姓名
        staffRoom:'全部',//教研室
        dept:'全部',//系
        courseName:'',//课程名称
        size:50,
        pageNo:1,
      },
      gradeList:[],
      sumList:{},
      tableData: [],
      total:1,
      xueqiID:''
    };
  },
  mounted(){
    // this.getList()
    //学期列表
    this.commonApi.getXQOption().then(res=>{
      this.xq = res.data;
      this.commonApi.getCurrentXQ().then(mes=>{
        this.dataForm.xueqi = mes.data.isAdmin !==1? mes.data.id:'';
        this.xueqiID = mes.data.isAdmin !==1?mes.data.id:'';
      })
    })
    //系列表
    this.commonApi.getXIOption().then(res=>{
      this.xi = [{deptName:'全部'},...res.data]
    })
    //获取教研室
    this.commonApi.getJYSOption().then(res=>{
      this.jys = [{deptName:'全部'},...res.data]
    })
    let year = new Date().getFullYear();
    let yaerList = []
    for(let i=0;i<5;i++){
      yaerList.push( year -i)
    }
    this.gradeList = yaerList
  },
  methods: {
      //当前页
      currentPage(e){
        this.dataForm.pageNo = e;
        this.getList()
      },
      async getList(){
        let res,mes;
        let params = {
          ...this.dataForm,
          staffRoom:this.dataForm.staffRoom=='全部'?'':this.dataForm.staffRoom,
          dept:this.dataForm.dept=='全部'?'':this.dataForm.dept
        }
        delete params.changeValue
        if(this.dataForm.changeValue == 1){
          res = await basicKCList1(params)
          mes = await basicKCListSum1(params)
        }else if(this.dataForm.changeValue == 2){
          res = await basicKCList2(params)
          mes = await basicKCListSum2(params)
        }else if(this.dataForm.changeValue == 3){
          res = await basicKCList3(params)
          mes = await basicKCListSum3(params)
        }else if(this.dataForm.changeValue == 4){
          res = await basicKCList4(params)
          mes = await basicKCListSum4(params)
        } 
        this.tableData = res.data.records
        this.total =  res.total;
        this.sumList = mes.data
      },
      jumpPage(row,type){
        let mes ;
        if(this.dataForm.changeValue == 1){
          let leader;
          if(type =="作为课程负责人承担课程门数"){
            leader = 0
          }else if(type == "非课程负责人承担门数"){
            leader = 1
          }else if(type == "承担课程总门数"){
            leader = ''
          }
          mes = {
            xueqi:row.xueqi,
            dept:row.dept,
            staffRoom:row.staffRoom,
            teacherName:type == '作为课程负责人承担课程门数'?'':row.teacherName,
            isLeader:leader
            }
        }else if(this.dataForm.changeValue == 2){
          mes = {
            xueqi:row.xueqi,
            dept:row.dept,
            staffRoom:row.staffRoom,
            courseName:row.courseName
          }
        }else if(this.dataForm.changeValue == 3){
          mes = {
            xueqi:row.xueqi,
            dept:row.dept,
            staffRoom:row.staffRoom,
            major:row.major,
            isCommon:type == '通识门数'?0:type == '专业门数'?1:''
          }
        }else if(this.dataForm.changeValue == 4){
          mes = {
            xueqi:row.xueqi,
            dept:row.dept,
            staffRoom:row.staffRoom,
            major:row.major
          }
        }
        this.$router.push({
          path:'/teaching/basicData2',
          query:{
            mes:mes
          }
        })
      },
      changeSearch(e){
          this.changeValue = e;
          this.dataForm.xueqi = this.xueqiID;
          this.dataForm.major = '';
          this.dataForm.grade= '';
          this.dataForm.teacherName = '';
          this.dataForm.staffRoom = '全部';
          this.dataForm.dept = '全部';
          this.dataForm.courseName = '';
          this.dataForm.pageNo = 1;
          this.getList()
      },
      //导出
      importExcel(){
        let url = '';
        if(this.dataForm.changeValue == 1){
          url = '/teachBasicDataStatics/exportTeacherStatics';
        }else if(this.dataForm.changeValue == 2){
          url = '/teachBasicDataStatics/exportStaffStatics';
        }else if(this.dataForm.changeValue == 3){
          url = '/teachBasicDataStatics/exportMajorStatics';
        }else if(this.dataForm.changeValue == 4){
          url = '/teachBasicDataStatics/exportMajorStaticsCourse';
        }
        Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+url,
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '教学基础统计数据.xlsx');
        }); 
      },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  /deep/.table-data{
    border-bottom: 0;
    border-bottom-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
  } 
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../styles/commonCss.less";
.search-container {
  justify-content: flex-start !important;
  align-items: center;
}
.width70{width: 70px;}
.right87{
    margin-right: 12px;
}
.item-name {
  color: #004ca7;
  position: relative;
  .star{
    position: absolute;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FF3819;
    top: -6px;
    right: 6px;
  }
}
.hr{
  text-decoration: underline;
  cursor: pointer;
}
.count-css{
    padding: 0 10px;
    cursor: pointer;
    display: inline-block;
    border-bottom: 1px solid #004CA7;
}
.total-notice{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004CA7;
    margin-top:10px
}
.sum-css{
  display: flex;
  border: 1px solid #004ca7;
  border-top: 0px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  div{
    height: 86px;
    line-height: 86px;
    border-right: 1px solid #c7d7eb;
    text-align: center;
    background-color: #fff;
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #004ca7;
  }
}
</style>
